<template>
  <button class="flash-button">Flash</button>
</template>

<script setup></script>

<style scoped lang="less">
.flash-button {
  position: relative;
  height: 32px;
  padding: 8px 15px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  border: none;
  font-size: 14px;
  z-index: 1;
  overflow: hidden;

  &:hover {
    color: #000;
  }

  &:after {
    content: "";
    background-color: #fff;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
  }

  &:hover:after {
    transform: skewX(-45deg) scale(1, 1);
    transition: all 0.5s;
  }
}
</style>
